import router, { asyncRouter } from './router'
import NProgress from 'nprogress'
import store from './store'
import 'nprogress/nprogress.css'
// 白名单页面
const whileList = ['/login']
// 虚拟进度条
router.beforeEach(async(to, from, next) => {
  // 前置路由守卫
  NProgress.start()
  // next()
  if (store.state.user.token) {
    // 用户已经登录了，想去登录页,不让他去
    // if (to.path === '/login') {
    // 你想去的页面是否在白名单里面
    if (whileList.includes(to.path)) {
      next('/')
    } else {
      if (!store.state.user.userInfo.userId) {
        // 用户已登录马上就发起请求,在vuex里面发送，把数据存在vuex
        const res = await store.dispatch('user/getUserInfoAction')
        // console.log(1111, res)
        const { menus } = res.roles
        // 利用后给的权限页面数据和自己的八个路由页面来进行筛选
        const filterRoutes = asyncRouter.filter(item => {
          return menus.includes(item.children[0].name)
        })
        filterRoutes.push({ path: '*', redirect: '/404', hidden: true })
        // 利用vuex将这八个数据存起来，加另外的五个路由
        store.commit('user/setRouters', filterRoutes)
        // 添加动态路由,这里的八个路由是动态的，通过addRouters添加到路由里面去
        router.addRoutes(filterRoutes)
        // bug：添加动态路由以后，刷新页面会白屏，这是因为你的路由是通过addRoutes方法动态添加的，刷新的时候就不会知道路由去哪里
        // 告诉路由你想要去哪里
        next(to.path)
      } else {
        next()
      }
    }
  } else {
    // 用户未登录，想去登录页，让他去，想去其他页，不让他去
    // if (to.path === '/login') {
    if (whileList.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }
})
router.afterEach((to, from, next) => {
  // 后置路由守卫
  NProgress.done()
})
